import './App.css'
import React from 'react';
import { Tabs } from 'antd';
import type { TabsProps } from 'antd';
import t1 from './img/image.png'
import {useNavigate} from 'react-router-dom'
import { DownOutlined, CaretUpOutlined, CaretDownOutlined,CommentOutlined,HeartOutlined,SendOutlined,RedditOutlined } from '@ant-design/icons';

function App() {
  const navigate = useNavigate()
  const onChange = (key: string) => {
    console.log(key);
  };

  const handleDetail = () =>{
    const id = Math.random().toString().slice(2,6)
    navigate(`/detail?id=${id}`)
  }

  const items: TabsProps['items'] = [
    {
      key: '1',
      label: '关注',
      children: '关注',
    },
    {
      key: '2',
      label: '推荐',
      children: [
        <div onClick={()=>handleDetail()}>
          <h3>你们都以什么方式认识的另一半?</h3>
          <dl style={{display:"flex",alignItems:'center'}}>
            <dt>
              <img src={t1} alt="" />
            </dt>
            <dd>
              修文德以来远人:21年刚买房的时候在业主群刚发的纷纷为大概就是发动机躲技能u四横峰街道接us回复胶擦...
              <p style={{fontWeight:'bold',fontSize:'10px',color:'blue'}}>阅读全文<DownOutlined /></p>
            </dd>
          </dl>
          <div style={{display:"flex",alignItems:'center',justifyContent:'space-around'}}>
            <button style={{color:"blue",background:'#cff'}}><CaretUpOutlined /> 赞同 169 </button>
            <button style={{color:"blue",background:'#cff'}}><CaretDownOutlined /></button>
            <span><CommentOutlined /> 93 条评论</span>
            <span><SendOutlined /> 分享</span>
            <span><RedditOutlined /> 收藏</span>
            <span><HeartOutlined /> 喜欢</span>
            <span>...</span>
          </div>
        </div>,
        <div>
          <h3>为什么公司都不使用HBuilder?</h3>
          <dl style={{display:"flex",alignItems:'center'}}>
            <dt>
            </dt>
            <dd>
              三国哥哥:你还别说,21年刚买房的时候在业主群刚发的纷纷为大概就是发动机躲技能u四横峰街道接us回复胶擦...
              <span style={{fontWeight:'bold',fontSize:'10px',color:'blue'}}>  阅读全文<DownOutlined /></span>
            </dd>
          </dl>
          <div style={{display:"flex",alignItems:'center',justifyContent:'space-around'}}>
            <button style={{color:"blue",background:'#cff'}}><CaretUpOutlined /> 赞同 3 </button>
            <button style={{color:"blue",background:'#cff'}}><CaretDownOutlined /></button>
            <span><CommentOutlined /> 1 条评论</span>
            <span><SendOutlined /> 分享</span>
            <span><RedditOutlined /> 收藏</span>
            <span><HeartOutlined /> 取消喜欢</span>
            <span>...</span>
          </div>
        </div>,
        <div>
          <h3>在中国是否有很多人不愿意交物业费，为什么?</h3>
          <dl style={{display:"flex",alignItems:'center'}}>
            <dt>
            </dt>
            <dd>
              北京Fund:朋友算过一笔账,他们说,21年刚买房的时候在业主群刚发的纷纷为大概就是发动机躲技能u四横峰街道接us回复胶擦...
              <span style={{fontWeight:'bold',fontSize:'10px',color:'blue'}}>  阅读全文<DownOutlined /></span>
            </dd>
          </dl>
          <div style={{display:"flex",alignItems:'center',justifyContent:'space-around'}}>
            <button style={{color:"blue",background:'#cff'}}><CaretUpOutlined /> 赞同 3650 </button>
            <button style={{color:"blue",background:'#cff'}}><CaretDownOutlined /></button>
            <span><CommentOutlined /> 2137 条评论</span>
            <span><SendOutlined /> 分享</span>
            <span><RedditOutlined /> 收藏</span>
            <span><HeartOutlined /> 取消喜欢</span>
            <span>...</span>
          </div>
        </div>,
        <div>
          <h3>世界的真相是什么?</h3>
          <dl style={{display:"flex",alignItems:'center'}}>
            <dt>
            </dt>
            <dd>
              千货逻辑:1.朋友算过一笔账,他们说,21年刚买房的时候在业主群刚发的纷纷为大概就是发动机躲技能u四横峰街道接us回复胶擦...
              <span style={{fontWeight:'bold',fontSize:'10px',color:'blue'}}>  阅读全文<DownOutlined /></span>
            </dd>
          </dl>
          <div style={{display:"flex",alignItems:'center',justifyContent:'space-around'}}>
            <button style={{color:"blue",background:'#cff'}}><CaretUpOutlined /> 赞同 3744 </button>
            <button style={{color:"blue",background:'#cff'}}><CaretDownOutlined /></button>
            <span><CommentOutlined /> 130 条评论</span>
            <span><SendOutlined /> 分享</span>
            <span><RedditOutlined /> 收藏</span>
            <span><HeartOutlined /> 喜欢</span>
            <span>...</span>
          </div>
        </div>,
        <div>
          <h3>deepseek究竟处于一个什么水平?</h3>
          <dl style={{display:"flex",alignItems:'center'}}>
            <dt>
            </dt>
            <dd>
              千货逻辑:1.朋友算过一笔账,他们说,21年刚买房的时候在业主群刚发的纷纷为大概就是发动机躲技能u四横峰街道接us回复胶擦...
              <span style={{fontWeight:'bold',fontSize:'10px',color:'blue'}}>  阅读全文<DownOutlined /></span>
            </dd>
          </dl>
          <div style={{display:"flex",alignItems:'center',justifyContent:'space-around'}}>
            <button style={{color:"blue",background:'#cff'}}><CaretUpOutlined /> 赞同 3744 </button>
            <button style={{color:"blue",background:'#cff'}}><CaretDownOutlined /></button>
            <span><CommentOutlined /> 130 条评论</span>
            <span><SendOutlined /> 分享</span>
            <span><RedditOutlined /> 收藏</span>
            <span><HeartOutlined /> 喜欢</span>
            <span>...</span>
          </div>
        </div>

      ]
    },
    {
      key: '3',
      label: '热榜',
      children: '热榜',
    },
    {
      key: '4',
      label: '视频',
      children: '视频',
    },
  ];
  return (
    <div>
      <Tabs defaultActiveKey="2" items={items} onChange={onChange} />
    </div>
  )
}

export default App
